<template>
  <div>
    {{ dialogInfo.path }}
    <el-transfer
      v-model="value"
      style="text-align: left; display: inline-block"
      filterable
      :titles="['全选', '全选']"
      :button-texts="['到左边', '到右边']"
      :data="datas"
      @change="handleChange"
    >
      <span slot-scope="{ option }">{{ option.key }} - {{ option.label
      }}</span>
    </el-transfer>
  </div>
</template>

<script>
export default {
  name: 'TransferDialog',
  props: {
    dialogInfo: {
      type: Object,
      default: null
    },
    datas: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      value: [],
      selectedLabel: [],
      selectedResult: ''
    }
  },
  watch: {
    datas: {
      handler() {
        this.value = []
      },
      deep: true
    }
  },
  methods: {
    handleChange() {
      console.log(this.value)
      for (let i = 0; i < this.value.length; i++) {
        this.selectedLabel[i] = this.datas[this.value[i] - 1].label
      }
      this.selectedResult = this.selectedLabel.join(',')
      this.$emit('returnSelectedResult', this.selectedResult)
      this.selectedLabel = []
      this.selectedResult = ''
    }
  }
}
</script>

<style scoped>

</style>
